/*
 * @Author: zhouyanxin123 10857086+zhouyanxin123@user.noreply.gitee.com
 * @Date: 2022-08-15 11:17:56
 * @LastEditors: zhouyanxin123 10857086+zhouyanxin123@user.noreply.gitee.com
 * @LastEditTime: 2022-08-16 17:32:53
 * @FilePath: \ceshi\src\Gongyingshang.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from "react";
import {
  Button,
  Cascader,
  Input,
  Table,
  Pagination,
  ConfigProvider,
  Space,
  Col,
  Row,
  Select,
  DatePicker,
  LocaleProvider,
  Modal,
  Radio,
} from "antd";

import zhCN from "antd/lib/locale/zh_CN";
import "./gysliebiao.css";

import {
  DeploymentUnitOutlined,
  InfoCircleOutlined,
  UserOutlined,
  PlusCircleOutlined,
  DownOutlined,
  UpOutlined,
} from "@ant-design/icons";
import locale from "antd/lib/date-picker/locale/zh_CN";

export default function Gysliebiao() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const { RangePicker } = DatePicker;
  const { Option } = Select;
  const [attend, setAttend] = useState(false);
  const columns = [
    {
      title: "合作情况",
      dataIndex: "cooperation",
      key: "cooperation",
      className: "bgColor",
    },
    {
      title: "供应商名称",
      dataIndex: "name",
      key: "name",
      className: "bgColor",
    },
    {
      title: "联系人",
      dataIndex: "contact",
      key: "contact",
      className: "bgColor",
    },
    {
      title: "电话",
      dataIndex: "landline",
      key: "landline",
      className: "bgColor",
    },
    {
      title: "手机号",
      dataIndex: "phone_number",
      key: "phone_number",
      className: "bgColor",
    },
    {
      title: "QQ",
      dataIndex: "qqnumber",
      key: "qqnumber",
      className: "bgColor",
    },
    {
      title: "省份/城市",
      dataIndex: "city",
      key: "city",
      className: "bgColor",
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
      className: "bgColor",
    },
    {
      title: "备注",
      dataIndex: "note",
      key: "note",
      className: "bgColor",
    },
    {
      title: "添加时间",
      dataIndex: "update_time",
      key: "update_time",
      className: "bgColor",
    },
    {
      title: "管理",
      key: "action",
      className: "bgColor",
      render: () => (
        <Space size="middle">
          <button onClick={showModal}>修改</button>
          <button>删除</button>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: 1,
      cooperation: "1",
      name: "1",
      contact: "1",
      landline: "1",
      phone_number: "1",
      qqnumber: "1",
      city: "1",
      address: "1",
      note: "1",
      update_time: "1",
    },
  ];
  const [value, setValue] = useState(1);
  const onChange = (e) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };

  return (
    <div>
      <div className="gybutton">
        <Button type="primary" className="sysp">
          供应商列表
        </Button>
        <Button type="primary" className="xzsp" onClick={showModal}>
          新增供应商
        </Button>
        <div className="right">
          <Input
            type="text"
            className="input"
            placeholder="供货商、联系人、手机号"
          />
          <Button type="primary" size="small" className="search sou">
            搜索
          </Button>
          <Button
            type="primary"
            size="small"
            className="highSearch"
            onClick={() => {
              setAttend(!attend);
            }}
          >
            高级搜索 {attend ? <UpOutlined /> : <DownOutlined />}
          </Button>
        </div>
        {!attend ? null : (
          <>
            <div id="heighSearchs">
              <div className="left">
                <ul>
                  <li>
                    <span>合作情况</span>
                    <span>
                      <select value="1">
                        <option value="1">请选择</option>
                        <option value="2">合作</option>
                        <option value="3">未合作</option>
                      </select>
                    </span>
                  </li>
                  <li>
                    <span>电话</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>微信</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>网址</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>添加时间</span>
                    <span>
                      <Space direction="vertical" size={12}>
                        <RangePicker
                          locale={locale}
                          size="small"
                          className="rpss"
                        />
                      </Space>
                    </span>
                  </li>
                </ul>
              </div>
              <div className="middle">
                <ul>
                  <li>
                    <span>供应商名称</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>传真</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>QQ</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>省份</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                </ul>
              </div>
              <div className="right">
                <ul>
                  <li>
                    <span>联系人</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>手机号</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>邮箱</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                  <li>
                    <span>城市</span>
                    <span>
                      <input type="text" />
                    </span>
                  </li>
                </ul>
              </div>
            </div>
            <div className="btnitem">
              <button>立即搜索</button>
              <button>清空条件</button>
            </div>
          </>
        )}
      </div>
      <Table columns={columns} dataSource={data} pagination={false} />
      <ConfigProvider locale={zhCN}>
        <Pagination
          className="GetPages"
          total={20}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `总共 ${total} 页`}
        />
      </ConfigProvider>
      <Modal
        title="新增供应商"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div id="gysmod">
          <ul>
            <li style={{ display: "flex" }}>
              <span>合作情况</span>
              <span className="gysra">
                <Radio.Group onChange={onChange} value={value}>
                  <Radio value={1}>已合作</Radio>
                  <Radio value={2}>未合作</Radio>
                </Radio.Group>
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>供应商名称</span>
              <span>
                <input type="text" />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>联系人</span>
              <span>
                <input type="text" />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>电话</span>
              <span>
                <input type="text" />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>传真</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>手机号</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>微信号</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>QQ</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>邮箱</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>网址</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span className="gsysssp">省份城市</span>
              <input type="text" className="gsyss" />省
              <input type="text" className="gsyss" />市
            </li>
            <li style={{ display: "flex" }}>
              <span>地址</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>备注</span>
              <span>
                <textarea></textarea>
              </span>
            </li>
          </ul>
        </div>
      </Modal>
    </div>
  );
}
